<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="Effects - Bimrun Engine v3.7" content="width=device-width, initial-scale=1.0">
    <title>Bimrun Engine v3.7</title>
</head>

<body style=" margin: 0; padding: 0; overflow: hidden; ">

    <div id="container" style=" margin: 0; padding: 0; width: 100%; height: 100%; position: absolute; "></div>

    <div id="desc" style=" margin: 10px; padding: 0px; position: absolute; bottom: 0px; ">

        <input type="button" value="添加矩形水面" id="addRectWater" />
        <input type="button" value="添加自定义水面" id="geometryToWater" />
        <input type="button" value="删除水面" id="delWater" />
        <input type="button" value="动态线段" id="addFlowLine" />
        <input type="button" value="删除动态线段" id="delFlowLine" />
        <input type="button" value="添加太阳效果" id="addLensflare" />
        <input type="button" value="添加天空盒" id="addSkybox" />


    </div>

    <script src='../depends/config.js'></script>
    <script src='../bimrun-engine-v3.7.js'></script>
    <script>

        let viewer = window.viewer = new Viewer( {

            container: document.getElementById( "container" ),
            indicator: { url: "../resources/aim.png", size: 50 }

        } );

        viewer.createNavCube( viewer.container );

        viewer.loadScene( '101534881' );

        viewer.addEventListener( BIMRUN.Events.IntersectModel, data => { console.log( data.intersect.point ); } );


        /**
         * BIMRUN Engine 动态效果 示例
         * 
         */
        let waterObj;
        document.getElementById( "addRectWater" ).addEventListener( "click", function () {

            if ( waterObj ) {

                viewer.removeCustomObject( waterObj );
                waterObj = null;

            }

            waterObj = viewer.envEffects.createWaterRect( {
                position: { x: -4, y: -22, z: -2 }, // 水面位置
                width: 20, // 水面宽度
                length: 20, // 水面长度
                textureUrl: "./resources/water.jpg", // 加载水面纹理url
                normMap0: "./resources/Water_1_M_Normal.jpg",
                normMap1: "./resources/Water_2_M_Normal.jpg",
                flowSpeed: 0.02 // 水面流速
            } );

        } );


        document.getElementById( "geometryToWater" ).addEventListener( "click", function () {

            if ( waterObj ) {

                viewer.removeCustomObject( waterObj );
                waterObj = null;

            }

            var geometry = new THREE.RingBufferGeometry( 2, 8, 32 );

            waterObj = viewer.envEffects.geometryToWater( geometry, {
                position: { x: -4, y: -22, z: -2 }, // 水面位置
                textureUrl: "./resources/water.jpg", // 加载水面纹理url
                normMap0: "./resources/Water_1_M_Normal.jpg", // 法线贴图1
                normMap1: "./resources/Water_2_M_Normal.jpg", // 法线贴图2
                flowSpeed: 0.04 // 水面流速
            } );

        } );


        document.getElementById( "delWater" ).addEventListener( "click", function () {

            if ( waterObj ) {

                viewer.removeCustomObject( waterObj );
                waterObj = null;

            }

        } );



        const path1 = [
            { x: 19.82216450708276, y: -18.417856601631726, z: 0.38413625428440525 },
            { x: 19.8988920806463, y: -38.584472060747636, z: 0.3693499275655 }
        ];
        const path2 = [
            { x: 14.8988920806463, y: -38.584472060747636, z: 0.3693499275655 },
            { x: 14.82216450708276, y: -18.417856601631726, z: 0.38413625428440525 }

        ];
        const path3 = [
            { x: 22.364065165460097, y: -28.126378333544547, z: -0.1471807330177768 },
            { x: 7.029060251784958, y: -28.38948311943527, z: -2.1900420421829736 }
        ];
        const path4 = [
            { x: -13.683439871325795, y: -38.94734397308448, z: -4.103635865331455 },
            { x: -5.210781786522996, y: -38.92182887862596, z: -3.2030427088204476 },
            { x: 4.865237982181097, y: -34.075338102580425, z: -2.296994762806463 },
            { x: 5.563020656368811, y: -17.819802016126403, z: -1.6900132853158993 }
        ];

        let flowlines = [];
        let offsetMin = { x: -0.5, y: -0.5 }, offsetMax = { x: 1.5, y: 1.5 };
        document.getElementById( "addFlowLine" ).addEventListener( "click", function () {

            let flowline;

            flowline = viewer.envEffects.createFlowLine( path1, {
                tubularSegments: 10,
                radius: 0.5,
                radialSegments: 8,
                mapUrl: "./resources/flowline3.png"
            } );
            flowline.offsetPerFrame = { x: -0.06, y: -0.06 };
            flowline.offsetMinValue = offsetMin;
            flowline.offsetMaxValue = offsetMax;
            flowlines.push( flowline );

            flowline = viewer.envEffects.createFlowLine( path2, {
                tubularSegments: 10,
                radius: 0.5,
                radialSegments: 8,
                mapUrl: "./resources/flowline2.png"
            } );
            flowline.offsetPerFrame = { x: -0.01, y: -0.01 };
            flowline.offsetMinValue = offsetMin;
            flowline.offsetMaxValue = offsetMax;
            flowlines.push( flowline );

            flowline = viewer.envEffects.createFlowLine( path3, {
                tubularSegments: 10,
                radius: 0.5,
                radialSegments: 8,
                mapUrl: "./resources/flowline3.png"
            } );
            flowline.offsetPerFrame = { x: -0.02, y: -0.02 };
            flowline.offsetMinValue = offsetMin;
            flowline.offsetMaxValue = offsetMax;
            flowlines.push( flowline );

            flowline = viewer.envEffects.createFlowLine( path4, {
                tubularSegments: 30,
                radius: 0.5,
                radialSegments: 8,
                mapUrl: "./resources/flowline3.png"
            } );
            flowline.offsetPerFrame = { x: -0.02, y: -0.02 };
            flowline.offsetMinValue = offsetMin;
            flowline.offsetMaxValue = offsetMax;
            flowlines.push( flowline );

        } );


        document.getElementById( "delFlowLine" ).addEventListener( "click", function () {

            for ( let i = 0; i < flowlines.length; i++ ) {

                viewer.removeCustomObject( flowlines[ i ] );

            }

            flowlines.length = 0;

        } );

        //太阳特效 lensflare
        document.getElementById( "addLensflare" ).addEventListener( "click", function () {
            viewer.envEffects.createLensflare( undefined,{
                imageUrl1: './resources/lensflare0.png',
                imageUrl2: './resources/lensflare3.png'
            });
        });

        document.getElementById( "addSkybox" ).addEventListener( "click", function(){
            //[positiveX, negativeY, positiveY, negativeY, positiveZ, negativeZ]
            let urls = [
                
                
            // './resources/skybox/posz.jpg',
            // './resources/skybox/negz.jpg',


           
                

            //     './resources/skybox/posy.jpg',
            //     './resources/skybox/negy.jpg',

                
            //     './resources/skybox/negx.jpg',
            //     './resources/skybox/posx.jpg',

            
            './resources/skybox/negx.jpg',
            './resources/skybox/posx.jpg',
 

                
            
                
                
                
                './resources/skybox/posz.jpg',
                './resources/skybox/negz.jpg',

                './resources/skybox/posy.jpg',
                './resources/skybox/negy.jpg',

                

                
                

                
            ];
            viewer.envEffects.createSkyboxBackground( urls );


        })




    </script>
</body>

</html>